<template>
  <div class="approval">
    <div class="top">
      <ul>
        <li @click="handleClick(true)" :class="state?'active':''">我提交的审批
        </li>
        <li @click="handleClick(false)" :class="!state?'active1':''">由我审批
        </li>
      </ul>
    </div>
    <div class="content">
       <Apply ref="apply" v-if="state"></Apply>
       <Examination ref="examination" v-else></Examination>
    </div>
  </div>
</template>

<script>
  import Apply from '@/components/mail/approval/apply'
  import Examination from '@/components/mail/approval/examination'
  import {mapState} from 'vuex'
    export default {
        name: "index",
        components:{Apply,Examination},
        data() {
            return {
                state: true,
            }
        },
        computed:{
          ...mapState(['common'])
        },
        created(){
          this.state = this.common.approvalState;
        },
        methods:{
            handleClick(type){
                this.state=type;
                this.$store.commit('SET_APPROVALSTATE',this.state);//保存当前状态
            }
        }
    }
</script>

<style scoped lang="scss">
  .approval{
    padding: 15px;
    .top{
      margin-bottom: 20px;
      ul {
        display: flex;
        align-items: center;
        width: 290px;
        height: 30px;
        border: 1px solid #2A97F9;
        border-radius: 10px;

        li {
          text-align: center;
          width: 150px;
          height: 100%;
          line-height: 28px;
          cursor: pointer;
          font-size: 14px;
        }

        .active {
          color: #fff;
          background-color: #2A97F9;
          border-bottom-left-radius: 6px;
          border-top-left-radius: 6px;
        }

        .active1 {
          color: #fff;
          background-color: #2A97F9;
          border-bottom-right-radius: 6px;
          border-top-right-radius: 6px;
        }
      }
    }
  }

</style>
